<template>
	<div class="my-image" @click="$router.push({ path: `/article/${share.id}`, query: { type: '图片' } })">
		<!-- 图片 -->
		<div class="images"><van-image class="items" fit="cover" :src="share.img_url" /></div>
		<!-- 描述 -->
		<div class="info">
			<!-- 标题 -->
			<h2 class="title">{{ share.title }}</h2>
			<p class="text">{{ share.zhaiyao }}</p>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		share: Object
	}
};
</script>

<style scoped lang="less">
.images {
	width: 100vw;
	height: 300px;
	.items {
		width: 100vw;
		height: 300px;
	}
}
.info {
	width: 100vw;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	line-height: 1.5;
	.title {
		font-weight: bold;
		font-size: 15px;
	}
	.text {
		font-size: 14px;
	}
}
.my-image {
	position: relative;
	margin: 5px 0;
}
</style>
